<template>
  <div>
    <navSearch :show-before="false" :formList="formList" @btnSearch="btnSearch">
      </navSearch>

    <div class="statistical">
      <span class="total">子类别总数：xxx</span>
      <el-button class="addBtn" type="primary" plain  @click="add">新增</el-button>
    </div>
     <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="childClass"
        label="子类别名称"
        width="450">
      </el-table-column>
      <el-table-column
        prop="childClassSort"
        label="排序"
        width="450">
      </el-table-column>
      <el-table-column
        prop="operation"
        label="操作">
      <template slot-scope="{row}">
        <el-link type="primary" @click="edit(row.id)">编辑</el-link>
        <el-link type="danger" @click="del(row.id)">删除</el-link>
      </template>
      </el-table-column>
     </el-table>

   <!-- 编辑弹框 -->
    <el-dialog
      title="编辑类别"
      :visible="editDialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="子类别名称">
          <el-input v-model="form.childClass"></el-input>
        </el-form-item>
          <el-form-item label="排序">
          <el-input v-model="form.childClassSort"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getChildGoodsClassList, editChildGoodsClassList, addChildGoodsClassList, delChildGoodsClassList } from '@/api/storeManage'
export default {
  created () {
    this.getChildGoodsClassList()
  },
  data () {
    return {
      editDialogVisible: false,
      tableData: [],
      formList: {
        goodsTypeI: true
      },
      form: {
        childClass: '',
        childClassSort: ''
      }

    }
  },
  methods: {
    // 渲染数据
    async getChildGoodsClassList () {
      this.tableData = await getChildGoodsClassList()
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm('确认删除该分类吗？')
        // 只有点击了确定才能进入到下一步
        await delChildGoodsClassList(id)
        this.getChildGoodsClassList()
        this.$message.success('删除分类成功')
      } catch (error) {
        console.log(error)
      }
    },

    // 编辑
    edit (id) {
      this.editDialogVisible = true
      this.form = this.tableData.filter(item => item.id === id)[0]
    },
    // 新增
    add () {
      this.editDialogVisible = true
    },

    // 编辑确定
    async btnOK () {
      try {
        if (this.form.id) {
          await editChildGoodsClassList(this.form)
        } else {
          console.log('无id，新增')
          await addChildGoodsClassList(this.form)
          this.form = ''
        }
        // 重新拉取数据
        this.$message.success('操作成功')
        this.editDialogVisible = false
        this.getChildGoodsClassList()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>
.statistical{
  line-height: 60px;
  padding: auto 20px;
}
.total{
  margin: 20px 80px;
}
  .addBtn{
    float: left;
    margin: 10px 0px;

  }
</style>
